<template>
	<view>
		<view class="wrapper">
			<view class='base'>
				<image :src="LeaveLogInfo.applyUserImage" class="avatar"></image>
				<view class="info">
					<view class="name">{{LeaveLogInfo.applyUserName}}</view>
					<view class="time" >{{LeaveLogInfo.shopName}} {{LeaveLogInfo.classifyName}} {{LeaveLogInfo.className}}</view>
				</view>
			</view>
			<view @click="tel(LeaveLogInfo.phone)">
			  <image class="icon" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tel.png"></image>
			</view>
		</view>
		
		<view class="list" >
			<view class="item" style="display: flex;justify-content: space-between;">
				<view style="display: flex;" v-if='LeaveLogInfo.type===1'><view class="title">请假类型：</view>病假</view>
				<view style="display: flex;" v-if='LeaveLogInfo.type===2'><view class="title">请假类型：</view>事假</view>
				<view style="display: flex;" v-if='LeaveLogInfo.type===3'><view class="title">请假类型：</view>婚假</view>
				<view style="display: flex;" v-if='LeaveLogInfo.type===4'><view class="title">请假类型：</view>丧假</view>
				<view style="display: flex;" v-if='LeaveLogInfo.type===5'><view class="title">请假类型：</view>其他</view>
				<view class="colorStatus-1">{{LeaveLogInfo.createTime}}</view>
			</view>
			<view class="item"><view class="title">开始时间：</view>{{LeaveLogInfo.startTime}}</view>
			<view class="item"><view class="title">结束时间：</view>{{LeaveLogInfo.endTime}}</view>
			<view class="item"><view class="title">请假原因：</view>{{LeaveLogInfo.reason}}</view>
		</view>
		
		<view v-if='status==0' style="display: flex;justify-content:space-around;">
			<view class="refuse" @click="refuse()">拒绝</view>
			<view class="pass" @tap="passBtn">审批通过</view>
		</view>
		
		<l-modal ref="customModal" modalTitle="拒绝原因" @onClickCancel="cancel" @onClickConfirm="confirm">
			<template>
				<textarea placeholder="请输入拒绝原因" v-model="refundcase" style="background-color: #F2F2F2;border-radius: 6px;width:100%;padding:20px;box-sizing: border-box;height:200rpx;"></textarea>
			</template>
		</l-modal>
		
	</view>
</template>

<script>
	
	import lModal from '@/components/l-modal/l-modal.vue'
	export default {
	    components: {
	        lModal
	    },
		data() {
			return {
				status:0,
				"student":'王先生',
				'className':'夕阳红老年学堂 戏曲系 评弹班', 
				phone:'1888888888',
				'type':'事假', 
				avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a1.png',
				memo:'因为个人原因，明天要请假1天。',
				time:'2020.08.20 10:36',
				'start':'2021/7/27 09:30',
				 end:'2021/7/27 17:30',
				 show:false,
				 LeaveLogInfo:'',
				 refundcase:'',
			}
		},
		onLoad(option){
			this.getLeaveLogInfo(option.id)
			this.id = option.id
		},
		methods: {
			tel(tel){
				uni.makePhoneCall({
					phoneNumber:tel
				})
			},
			getLeaveLogInfo(id){
				this.$api.getLeaveLogInfo({
					id:id
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.LeaveLogInfo = res.data.dataMap
					}
				})
			},
			refuse(){
				this.$refs['customModal'].showModal()
			},
			cancel() {
				// do sth
			},
			confirm() {
				// do sth
				if(this.refundcase===''){
					uni.showToast({
						title: '请填写拒绝原因',
						duration: 1500,
						icon: "none",
						
					});
				}else{
					this.$api.passOrRefuseLeave({
					id:this.id,
					status: 1,
					replay:this.refundcase
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data)
						uni.navigateBack(1)
						uni.$emit("backdata",2);
					}
				})
				}
			},
			//审批通过
			passBtn(){
				this.$api.passOrRefuseLeave({
					id:this.id,
					status: 2
				}).then((res) => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '审核通过！',
							duration: 1500,
							icon: "none",
							
						});
						uni.navigateBack(1)
						uni.$emit("backdata",1);
						console.log(res.data.dataMap)
						// this.LeaveLogInfo = res.data.dataMap
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page{background: #F8F8F8;}
	.wrapper{display: flex;justify-content: space-between;align-items: center;background-color: white;}
    .base{padding:10px;margin:10px;box-sizing:border-box;display: flex;
		align-items: center;
      .avatar{width:40px;height: 40px;border-radius: 50%;}
  }
  .list{
	   margin-top:10px;
	   padding: 10px;
	   background-color: white;
	  .item{margin:10px;
	   display: flex;
	   color:#333333;
	   .title{color:#999999}
	   }
  }
  .name{font-weight: bold;color:#333333;font-size:28rpx;}
  .info{margin-left: 10px;color:#999999}
  .refuse{background-color: white;color:#FF5533;border:1px solid #FF5533;border-radius:5px;margin:20px;flex:1;padding: 10px;text-align: center;}
  .pass{background:#FF5533;color:white;border:1px solid #FF5533;border-radius:5px;margin:20px;flex:1;padding: 10px;text-align: center;}
</style>
